<!DOCTYPE html>
<html>
<head>
    <title></title>

<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-flut">
<div class="col-xs-4">
    <div style="padding:10px;">
   <form class="bs-example bs-example-form" role="form" action="{|addon_url:'add'}" method="post">
      <div class="input-group">
         <span class="input-group-addon">网站域名</span>
         <input type="text" name="domain" class="form-control" placeholder="解析好的域名" required="">
      </div>
      <br>

      <div class="input-group">
         <span class="input-group-addon">公司名称</span>
         <input type="text" name="webtitle" class="form-control" placeholder="">
      </div>
      <br>

      <div class="input-group">
         <span class="input-group-addon">公司地址</span>
         <input type="text" name="webaddress" class="form-control" placeholder="">
      </div>
      <br>

      <div class="input-group">
         <span class="input-group-addon">电脑模板</span>
         <input type="text" name="pcstyle" class="form-control" value="default" placeholder="" readonly="">
         <span class="btn btn-info input-group-addon " data-toggle="modal" 
   data-target="#myModal">选择模板</span>

      </div>
      <br>

      <div class="input-group">
         <span class="input-group-addon">手机模板</span>
         <input type="text" name="wapstyle" value="default" class="form-control" placeholder="" readonly="">
         <span class="btn btn-info input-group-addon " data-toggle="modal" 
   data-target="#myModal1">选择模板</span>
      </div>
      <br>

      <div class="input-group">
         <span class="input-group-addon">电脑跳转</span>
         <input type="url" name="nexturl" class="form-control" placeholder="电脑跳转地址" value="http://www.baidu.com">
      </div>
      <br>

      <div class="input-group">
         <span class="input-group-addon">手机跳转</span>
         <input type="url" name="wapurl" class="form-control" placeholder="手机跳转地址" value="http://www.baidu.com">
      </div>
      <br>
        
       <input type="submit"  value="确定" class="btn btn-danger btn-block"> 
   </form>
</div>
</div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
              选择电脑模板
            </h4>
         </div>
         <div class="modal-body container" style="width:595px;height:400px;overflow-y: auto;">
        
        <list from="$style" name="$s">
        <div class="col-xs-4" style="width:180px;height:200px;">
            <a href="javascript:;" onclick="selectpc('{$s.filename}')"><img src="{$s.image}" class="img-responsive"></a>
        </div>
        </list>
        </div>
 
         <div class="modal-footer">
           
            <button type="button" class="btn btn-primary " data-dismiss="modal">
               确定
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel1" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel1">
              选择手机模板
            </h4>
         </div>
         <div class="modal-body container" style="width:595px;height:400px;overflow-y: auto;">
        
        <list from="$style" name="$s">
        <div class="col-xs-4" style="width:180px;height:200px;">
            <a href="javascript:;" onclick="selectwap('{$s.filename}')"><img src="{$s.image}" class="img-responsive"></a>
        </div>
        </list>
        </div>
 
         <div class="modal-footer">
           
            <button type="button" class="btn btn-primary " data-dismiss="modal">
               确定
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
    function selectpc(style){
        $("input[name=pcstyle]").val(style);
        $('#myModal').modal('hide')
    }

    function selectwap(style){
        $("input[name=wapstyle]").val(style);
        $('#myModal1').modal('hide')
    }
</script>
</body>
</html>